<template>
  <div>
    <div class="add_btn">
      <el-button type="primary" @click="handleAdd">新增</el-button>
    </div>
    <el-table :data="tableData" stripe border height="calc(100vh - 150px)">
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="host" label="ip" />
      <el-table-column prop="port" label="端口" width="80" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="sort" label="排序" sortable />
      <el-table-column label="操作" width="160">
        <template #default="{ row }">
          <el-button :icon="CopyDocument" circle @click="handleCopy(row)" />
          <el-button :icon="Edit" circle @click="handleEdit(row)" />
          <el-button type="danger" :icon="Delete" circle @click="handleDelete(row)" />
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="80%" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form ref="formDataRef" :model="formData" :rules="formDataRules" label-width="70px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="ip" prop="host">
          <el-input v-model="formData.host" placeholder="请输入ip" />
        </el-form-item>
        <el-form-item label="端口">
          <el-input-number v-model="formData.port" :min="1" :max="65535" />
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" type="password" show-password placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="formData.sort" :min="1" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.notes" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button :loading="connectLoading" @click="testConnect">测试连接</el-button>
          <el-button type="primary" :loading="loading" @click="submitForm"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Delete, Edit, CopyDocument } from '@element-plus/icons-vue'
import { useCrudForm } from '@/hooks/useCrudForm'
import { useLoadingBtn } from '@/hooks/useLoadingBtn'
import { invoke } from '@tauri-apps/api/core'
import { tips, tipsError } from '@/utils/tips'

const formDataRef = ref(null)
const { tableData,
  dialogVisible,
  dialogTitle,
  formData,
  loading,
  handleAdd,
  handleCopy,
  handleEdit,
  handleDelete,
  submitForm
} = useCrudForm({
  title: '服务器信息',
  tableName: 'serverList',
  formInitData: {
    name: '',
    host: '',
    port: 22,
    username: '',
    password: '',
    sort: 1,
    notes: ''
  },
  formRef: formDataRef
})

const formDataRules = reactive({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  host: [{ required: true, message: '请输入ip', trigger: 'blur' }],
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

const [testConnect, connectLoading] = useLoadingBtn(async () => {
  const valid = () => {
    return new Promise((resolve, reject) => {
      formDataRef.value.validate((valid, fields) => valid ? resolve(valid) : reject(fields))
    })
  }
  await valid()
  try {
    await invoke('test_connect', {
      host: `${formData.host}:${formData.port}`,
      username: formData.username,
      password: formData.password
    })
    tips('连接成功')
  } catch (error) {
    tipsError(error)
  }
})
</script>

<style scoped lang="scss">
.add_btn {
  margin-bottom: 16px;
}
</style>
